import React, { useEffect, useState } from 'react'
import { Button, Form, Input, Tree, Drawer, Select } from 'antd';
import { SettingOutlined } from '@ant-design/icons'
import { changerInf } from "../apis/shop"

const { Option } = Select;

export default function ChaneShopType({ treedata, inf }) {
    //新增抽屉
    useEffect(()=>{
        form.setFieldsValue(inf)
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[inf])
    const treeData = treedata

    const [form] = Form.useForm()

    const [open, setOpen] = useState(false);
    const showDrawer = () => {
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };

    const onFinish = (values) => {
        console.log(values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    //树控件
    const onCheck = (checkedKeys, info) => {
        console.log(checkedKeys.checked);
    };



    return (
        <div>
            <SettingOutlined onClick={showDrawer}></SettingOutlined>
            <Drawer title="修改商品类型" placement="right" onClose={onClose} open={open}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    form={form}
                >
                    <Form.Item
                        label="商品类型名称"
                        name="title"
                        rules={[
                            {
                                required: true,
                                message: '请输入商品类型名称',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="status"
                        label="商品类型状态"
                    >
                        <Select
                            placeholder=""
                            allowClear
                        >
                            <Option value="0">启用</Option>
                            <Option value="1">停用</Option>
                        </Select>

                    </Form.Item>

                    <Form.Item
                        label="上级商品类型"
                        name="id"
                    >
                        <Tree
                            checkable
                            // defaultExpandedKeys={[1]}
                            defaultCheckedKeys={[inf.id]}
                            onCheck={onCheck}
                            treeData={treeData}
                            checkStrictly
                        />
                    </Form.Item>


                    <Form.Item
                        wrapperCol={{
                            offset: 15,
                            span: 9,
                        }}
                    >
                        <div style={{ display: "flex", flexDirection: "row" }}>
                            <Button style={{ marginRight: "10px" }}>取消</Button>
                            <Button type="primary" htmlType="submit" style={{ marginRight: "10px" }}>
                                提交
                            </Button>
                        </div>

                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    )
}
